<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <!--表单元素-->
    <!--action是提交到服务器的地址-->
     <form action="test.html" method="">
        <!--表单元素input-->
        <!--明文输入框-->
        <label for="yonghu">
            用户名：<input type="text" name="account" placeholder="请输入用户名" id="yonghu">
        </label>
        <br>
        <!--暗文输入框-->
        <label for="mima">
            密码：<input type="password" name="pwd" placeholder="请输入密码" id="mima">
        </label>
        <!--单选按钮-->
        <!--单选默认情况不会出现互斥，如果需要出现互斥，给name一个相同的属性值-->
        <!--value表示真正提交给后台的值-->
        <br>性别<br>
        <label for="nan">
            男<input type="radio" name="gender" value="male" id="nan">
        </label>
        <label for="nv">
            女<input type="radio" name="gender" value="female" id="nv">
        </label>
        <!--多选框-->
        <br>
        水果：
        香蕉<input type="checkbox" name="fruit" value="banana">
        苹果<input type="checkbox" name="fruit" value="apple">
        橘子<input type="checkbox" name="fruit" vale="orange">
        <!--提交按钮-->
        <br>
        <input type="submit" value="提交">
        <!--附件上传-->
        <br>
        <input type="file" name="文件上传" id="">
        <!--普通按钮 配合js完成-->
        <input type="button" value="普通按钮" id="btn">
        <!--重置按钮-->
        <!--重置按钮可以清空表单中填写的表单元素的值-->
        <input type="reset" value="重置">
        <!--隐藏域-->
        <!--悄悄提交一些数据-->
        <input type="hidden" name="token" value="2134864321834344">
    </form>
</body>
<script>
    //js的点击事件--event 事件本身 形参
    btn.onclick=function(event){
        //打印一下事件本身
        console.log(event);
        event.value="普通按钮1"
    }
</script>
</html>